<template>
    <div>
        <List_Page>
            <!-- 顶部搜索 -->
            <template #LIST_SEARCH>
                <el-form :model="queryData" label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="菜单名称：">
                                <el-input v-model="queryData.name" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary">搜索</el-button>
                            <el-button>重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
            <!-- 操作按钮 -->
            <template #LIST_BUT>
                <el-button type="success" @click="dialogVisible = true, pid = 0">添加</el-button>
            </template>
            <!-- 列表部分 -->
            <template #LIST_TABLE>
                <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border >
                    <el-table-column prop="title" label="菜单名称" />
                    <el-table-column prop="path" label="路径" />
                    <el-table-column prop="path" label="操作" width="200px">
                        <template #default="scope">
                            <el-button type="success" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                            <el-button type="primary" size="small" @click="handleAdd(scope.row.id)">添加</el-button>
                            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </List_Page>
        <!-- 添加 弹窗 -->
        <el-dialog v-model="dialogVisible" title="添加" width="30%" :before-close="handleClose">
            <span>
                <el-form :model="formData" label-width="120px" ref="ruleFormRef" :rules="rules">
                    <el-form-item label="菜单名称：" prop="title">
                        <el-input v-model="formData.title" placeholder="请填写菜单名称" />
                    </el-form-item>
                    <el-form-item label="访问路径：" prop="path">
                        <el-input v-model="formData.path" placeholder="请填写访问路径" />
                    </el-form-item>
                    <el-form-item label="图标代码：" prop="icon">
                        <el-input v-model="formData.icon" placeholder="请填写图标代码：" />
                    </el-form-item>

                </el-form>
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                    <el-button v-if="ids == 0" type="primary" @click="submitForm(ruleFormRef)">
                        确认
                    </el-button>
                    <el-button v-else type="primary" @click="handleModify(ruleFormRef)">
                        修改
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { reactive, ref } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
// 公共方法(同居请求头)
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
const { $config } = proxy
// 查询列表
const getList = () => {
    axios({
        method: "get",
        url: $config.envUrl + "/menu/list",
    }).then(res => {
        tableData.value = res.data.data;
    })
}
getList()
// 搜索表单
const queryData = ref<any>({})
// 列表数据
const tableData = ref<any>([])
// 弹窗默认值
const dialogVisible = ref(false)
// // 关闭弹窗回调
const handleClose = (done: () => void) => {
    console.log(done)
}
// 添加表单数据
interface RuleForm {
    title: string
    path: string
    icon: string
}
const ruleFormRef = ref<FormInstance>()
const formData = reactive<RuleForm>({
    title: "",
    path: '',
    icon: ''
})
// 检验方式
const rules = reactive<FormRules<RuleForm>>({
    title: [
        { required: true, message: '菜单名称不能为空', trigger: 'blur' },
        { min: 1, max: 6, message: '请填写1-6个字符', trigger: 'blur' },
    ],
    path: [
        { required: true, message: '路径不能为空', trigger: 'blur' },
    ],

})
const pid = ref(0)
// 点击确认
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axiosAdd()
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 添加子菜单
const handleAdd = (id: number) => {
    dialogVisible.value = true
    pid.value = id
}
// 添加菜单的方法
const axiosAdd = () => {
    let data = {
        ...formData,
        pid: pid.value
    }
    axios({
        method: "post",
        data: data,
        url: $config.envUrl + "/menu/add",
    }).then(res => {
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
        dialogVisible.value = false
        getList()
    })
}
// 取消关闭弹窗
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = false
}
// 删除的方法
const handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确定删除?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios({
                method: "delete",
                url: $config.envUrl + "/menu/delete/" + id,
            }).then(res => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                getList()
            })
        })

}
const ids = ref<number>(0)
// 编辑列表
const handleEdit = (id: number) => {
    dialogVisible.value = true
    ids.value = id
    axios({
        method: "get",
        url: $config.envUrl + "/menu/lsit/id",
        params: { id }
    }).then(res => {
        formData.title = res.data.data.title
        formData.path = res.data.data.path
        formData.icon = res.data.data.icon
    })

}
// 编辑确认
const handleModify = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let data = {
                ...formData,
                id: Number(ids.value)
            }
            axios({
                method: "post",
                url: $config.envUrl + "/menu/put",
                data,
            }).then(res => {
                dialogVisible.value = false

                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
                getList()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 修改的接口



</script>

<style scoped></style>